<template>
  <!-- 库位弹窗 -->
  <div>
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="90" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="position_common_vue1sadwespa"
      maxHeight="350"
      selectionType="single"
      :columns="columns"
      :onRowSelectChange="param => (this.selectedTableData = param)"
      :onColumnsChange="columns => (this.columns = columns)"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { queryControlLocations } from '@/api/part/common';
import { notifyAction } from '@/utils';
export default {
  props: {
    // 查询参数 storageCode partNo
    params: {
      type: Object
    }
  },
  data() {
    return {
      fetchApi: queryControlLocations,
      fetchParams: Object.assign({ xhrAbort: false }, this.params),
      columns: this.createTableColumns(),
      tableData: [],
      selectedTableData: [], // 选中的数据
      topFilterList: this.createTopFilterList()
    };
  },
  created() {},
  methods: {
    changeHandle(val) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign({}, { xhrAbort: false }, this.params, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.$refs.table.EXECUTE_RESET_HEIGHT();
      });
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '库位代码',
          fieldName: 'storagePositionCode',
          initialValue: ''
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '库位代码',
          dataIndex: 'storagePositionCode',
          fixed: 'left',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    handleConfirm() {
      if (this.selectedTableData.length) {
        this.$emit('onConfirm', this.selectedTableData);
        this.handleCancle();
      } else {
        notifyAction('请选择库位', 'warning');
      }
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
